<!-- 登录界面的弹窗 -->
<template>
	<view class="bd1">
		
		<view class="bd">
			
		</view>
		<view class="mainCtn">
			<view class="mainCtnMsg">
				<view class="blank1">
				
				</view>
			
				
				<view class="nickname">
					<text class="nicknameText">回复（）：</text>
					<input placeholder="请输入书籍评论" class="input" 
					 
					 v-model="inputText" />
				</view>
				<view class="grayLine">

				</view>
			</view>
			<view class="mainCtnBtn">
				<view class="reject" @click="backFun(false)">
					取消
				</view>
				<view class="blank">

				</view>
				<view class="accept" @click="gotoAddComment()">
					<!-- TODO调用父组件的login函数 -->
					确认评论
				</view>
			</view>
		</view>

	</view>
</template>
<style scoped>
	.blank1{
		height: 20rpx;
		width: 100%;
	}
	.grayLine {
		height: 2rpx;
		width: 100%;
		background-color: rgb(242, 242, 242);
	}

	.blank {
		width: 30rpx;
	}

	.reject {
		flex: 1;
		border-radius: 20%;
		line-height: 100rpx;
		font-weight: bold;
		background-color: rgb(241, 241, 241);
	}

	.accept {
		flex: 1;
		border-radius: 20%;
		line-height: 100rpx;
		font-weight: bold;
		color: white;
		background-color: rgb(255, 97, 10);
	}

	.mainCtnBtn {
		margin: 20rpx;
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: space-around;

	}

	.mainCtnMsg {
		flex: 3;
		display: flex;
		flex-direction: column;


	}

	.pic {
		
		flex: 2.3;
		width: 26%;
		margin: auto;

	}

	.img {
		width: 90%;
		height: 90%;
		margin: auto;
		align-items: center;
		justify-content: center;
		display: flex;



	}

	.nicknameText {
		margin-left: 20rpx;
	}

	.nickname {
		flex: 1;

		display: flex;
		justify-content: center;
		align-items: center;

	}

	.input {
		line-height: 60rpx;
	}

	.mainCtn {

		/* height: 400rpx; */
		width: 100%;

		display: flex;
		flex-direction: column;
		flex:1;
		z-index: 3;
		background-color: white;
		border-radius: 40rpx 40rpx 0 0;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}
	.bd{
		flex:2;
		width: 100%;
		/* background-color: rgb(231, 231, 231); */
		opacity: 40%;
	}
	.bd1{
		z-index: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgba(0,0,0,0.4);
	}
</style>
<script>
	export default {
		
		mounted() {
			
		},
		data() {
			return {
				inputText:'',//书评的文本内容
			}
		},
		methods: {
			//成功添加书评
			gotoAddComment(){
				this.$emit('addCommentFun',this.inputText)
			}
		}
	}
</script>